import React, { Component } from 'react';
import moment from 'moment'
import { connect } from 'react-redux'  
import { Modal, Form, Input,Select ,DatePicker,message,TimePicker,Radio,Button,Row,Icon, Col,TreeSelect} from 'antd';
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const RadioGroup = Radio.Group;
const Option =Select.Option;
const TreeNode = TreeSelect.TreeNode;
var dayList = ['1', '2','3', '4','5', '6','7', '8','9', '10','11', '12','13', '14','15', '16','17', '18','19', '20','21', '22','23', '24','25', '26','27', '28','29', '30','31'];

class ViewPlanModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  
  render() {
    const { children, dispatch,item,cycletime,condition,isShow,assetTypeTree,roomList,assetBrandList,assetModelList,rackList,
            manageDeptTree,useDeptTree,userList,obj,typeId,brandId} = this.props;  
    const { getFieldDecorator } = this.props.form;   
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };  

    const formItemLayout1 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
    };     
    
    const formItemLayout2 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 8},
    };  
    const getDay = data => data.map((item) => {
      return <Option key={item+''}>{item}日</Option>
     })

     const showIns = data => {
      if (data.reportPlanList && data.reportPlanList.length) {
       switch(data.cycleType){
         case 1:
          return data.reportPlanList.map((item,index) => (
           <div key={index}>
             <div style={{float:"left",marginRight:30}}>
               <Input value={item.time} style={{width:'110px'}}/>
             </div>
             <div style={{display:"block",height:0,clear:"both"}}></div>
           </div>
          ));
         case 2:
          return data.reportPlanList.map((item,index) => (
           <div key={index}>
             <div style={{float:"left",marginRight:30}}>
               <Input value={item.day!=null?item.day==1?"周一":item.day==2?"周二":item.day==3?"周三":item.day==4?"周四":item.day==5?"周五":item.day==6?"周六":item.day==7?"周日":"":""} style={{width:'80px'}}/>            
             </div>
             <div style={{float:"left",marginRight:30}}>
                <Input  value={item.time}  style={{width:'110px'}}/>
             </div>
             <div style={{display:"block",height:0,clear:"both"}}></div>
           </div>
          ));
         case 3:
          return data.reportPlanList.map((item,index) => (
           <div key={index}>
             <div style={{float:"left",marginRight:30}}>
               <Select value={item.day!=null?item.day+'':undefined} placeholder="选择日期"style={{ width: 80 }} >        
                  {getDay(dayList)}                       
               </Select>
             </div>
             <div style={{float:"left",marginRight:20}}>
               <Input  value={item.time}  style={{width:'110px'}}/>
             </div>
             <div style={{display:"block",height:0,clear:"both"}}></div>
           </div>
          ));
       }
      }
     }

    const showConditionIns = (obj) => {
      return <div>
               <div style={{width:'50%',float:"left",}}>
                <div style={{float:"left",marginRight:5}}>所在机房：</div>
                <div style={{float:"left",marginRight:5}}>
                   <Input value={obj.roomName} style={{width:'200px'}}/>         
                </div> 
                <div style={{display:"block",height:0,clear:"both"}}></div>
              </div> 
              <div style={{width:'50%',float:"right",}}>
                <div style={{float:"left",marginRight:5}}>所在机柜：</div>
                <div style={{float:"left",marginRight:5}}>
                   <Input value={obj.rackName} style={{width:'200px'}}/>  
                </div>  
                <div style={{display:"block",height:0,clear:"both"}}></div> 
              </div>   
              <div style={{width:'50%',float:"left",}}>
                <div style={{float:"left",marginRight:5}}>资产sn号：</div>
                <div style={{float:"left",marginRight:5}}>
                  <Input value={obj.serial_no} style={{width:'200px'}}/>
                </div> 
                <div style={{display:"block",height:0,clear:"both"}}></div>
              </div> 
              <div style={{width:'50%',float:"left",}}>
                <div style={{float:"left",marginRight:5}}>资产RFID：</div>
                <div style={{float:"left",marginRight:5}}>
                  <Input  value={obj.rfid_no} style={{width:'200px'}}/>
                </div> 
                <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>  
              <div style={{width:'50%',float:"left",}}>
                <div style={{float:"left",marginRight:5}}>资产编号：</div>                
                <div style={{float:"left",marginRight:5}}>
                    <Input  value={obj.asset_no} style={{width:'200px'}}/>
                </div> 
              </div>
              <div style={{width:'50%',float:"left",}}>
                <div style={{float:"left",marginRight:5}}>资产名称：</div>
                <div style={{float:"left",marginRight:5}}>
                  <Input value={obj.asset_name} style={{width:'200px'}}/>
                </div>
              </div>
             <div>
              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>资产分类：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.typeName} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>资产品牌：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.brandName} style={{width:'200px'}}/>
              </div>  
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>资产型号：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.modelName} style={{width:'200px'}}/>
              </div>  
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>             

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>资产状态：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.status_==1?"已入库":obj.status_==2?"在架":obj.status_==3?"已报废":obj.status_==5?"已出库":""} style={{width:'200px'}}/>
              </div>  
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>购置时间：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input value={obj.buyTime1} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>维保时间：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.expirationTime1} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5, letterSpacing:'0.3em'}}>IP地址：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.ip}  style={{width:'196px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>管理部门：</div>
              <div style={{float:"left",marginRight:5}}>               
                <Input value={obj.manageBranchName}  style={{width:'200px'}}/>
              </div>  
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>使用部门：</div>
              <div style={{float:"left",marginRight:5}}>             
                <Input value={obj.useBranchName}  style={{width:'200px'}}/>
              </div>  
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5,letterSpacing:'0.3em'}}>使用人：</div>
              <div style={{float:"left",marginRight:5}}>
                <Input value={obj.endUserName}  style={{width:'200px'}}/>
              </div>  
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5,letterSpacing:'0.3em'}}>合同号：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input  value={obj.contract_no} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5,letterSpacing:'0.3em'}}>发票号：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input value={obj.invoice_no} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5,letterSpacing:'0.3em'}}>供货方：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input value={obj.supplier_} style={{width:'198px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>联系电话：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input value={obj.contacts_phone} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5,letterSpacing:'0.3em'}}>联系人：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input value={obj.contacts_} style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>    

              <div style={{width:'50%',float:"left",}}>
              <div style={{float:"left",marginRight:5}}>售后电话：</div>
              <div style={{float:"left",marginRight:5}}>
                 <Input value={obj.hotline}  style={{width:'200px'}}/>
              </div> 
              <div style={{display:"block",height:0,clear:"both"}}></div>
              </div>  
          </div>        
    </div>

    }

    return (
      <span>
            <Modal
              maskClosable= {this.props.maskClosable}
              confirmLoading= {this.props.confirmLoading}
              title={this.props.title}
              width={700}
              visible={this.props.visible}
              footer={[
                <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
              ]}
              onCancel={this.props.onCancel}
              key={this.props.newKey}
            >
              <Form layout='horizontal'>
                    <FormItem style={{marginBottom:'0px'}}>
                      {getFieldDecorator('id',{initialValue:item.id_})(
                        <Input type="hidden"/>
                      )}
                    </FormItem>       
                    <Row>           
                      <Col span={12}>    
                        <FormItem
                            {...formItemLayout}
                              label="模板名称"
                              hasFeedback
                            >
                            {
                              getFieldDecorator('name', {
                                initialValue: item.name,
                              })(<Input   readOnly="readonly" placeholder="请输入模板名称" />)
                            }
                        </FormItem>  
                      </Col>
                      <Col span={12}>   
                        <FormItem
                            {...formItemLayout}
                              label="报表类型"   
                              required
                              hasFeedback
                            >
                            {getFieldDecorator('type', {
                              initialValue:  item.type ==1? "自动" : "手动",                            
                            })(<Input  readOnly="readonly" />)}
                        </FormItem>  
                      </Col>
                      </Row>
                      {item.type ==1?(<Row>
                        <Col span={24}>
                          <FormItem
                            {...formItemLayout2}                        
                            required
                            label="重复周期"
                            >
                             {getFieldDecorator('cycleType', {
                              initialValue:  cycletime.cycleType ==1? "每天" :cycletime.cycleType ==2? "每周": "每月",                            
                             })( <Input  readOnly="readonly"/>)}
                          </FormItem>  
                        </Col>
                        </Row>):""}
                                     
                        {item.type ==1?(<Row>
                        <Col span={24}>
                          <FormItem
                            {...formItemLayout1}
                            label="执行时间"                            
                            required
                            >                             
                            {showIns(cycletime)}
                          </FormItem> 
                        </Col>
                      </Row>):""}
                      <Row>
                        <Col span={24}> 
                          <FormItem 
                            {...formItemLayout1}
                            label="统计参数"
                            required                              
                            hasFeedback
                          >
                          {getFieldDecorator('statisticsCondition', {
                              initialValue:  item.statisticsCondition,                            
                            })(<Input readOnly="readonly" />)}
                        </FormItem>    
                      </Col>
                      </Row>
                      <Row>
                        <Col span={24}>
                          <FormItem 
                              {...formItemLayout1}
                              label="列表参数"
                              required                              
                              hasFeedback
                            >
                            {/* <div style={{marginBottom:10}}>
                              <Button type="primary" size="large" onClick={addCondition}>添加列表参数</Button>
                            </div> */}
                            {showConditionIns(obj)}
                          </FormItem>  
                      </Col>
                      </Row>
                      <Row>
                      <Col span={24}>
                        <FormItem
                            {...formItemLayout1}
                            label="备注"
                            hasFeedback
                        >
                        {
                          getFieldDecorator('remark', {
                            initialValue:  item.remark,  
                          })(<Input type="textarea" readOnly="readonly" autosize={{ minRows: 3, maxRows: 6 }}/>)
                        }
                      </FormItem>
                     </Col>
                   </Row>
                </Form>              
        </Modal>        
      </span>
    );
  }
    
}

export default Form.create()(ViewPlanModal)